{% extends 'car_system/base.html' %}

{% block title %}个人资料 - 汽车数据分析系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-user me-2"></i>个人信息</h5>
            </div>
            <div class="card-body text-center">
                {% if user.profile.avatar %}
                <img src="{{ user.profile.avatar.url }}" alt="{{ user.username }}" class="rounded-circle img-fluid mb-3" style="width: 150px; height: 150px; object-fit: cover;">
                {% else %}
                <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 150px; height: 150px;">
                    <i class="fas fa-user fa-5x"></i>
                </div>
                {% endif %}
                <h4>{{ user.username }}</h4>
                <p class="text-muted">{{ user.email }}</p>
                
                {% if user.profile.phone %}
                <p><i class="fas fa-phone me-2"></i> {{ user.profile.phone }}</p>
                {% endif %}
                
                <div class="d-flex justify-content-center mt-3">
                    <div class="me-3 text-center">
                        <h5>{{ user.date_joined|date:"Y-m-d" }}</h5>
                        <p class="text-muted mb-0">注册日期</p>
                    </div>
                    <div class="text-center">
                        <h5>{{ user.last_login|date:"Y-m-d H:i" }}</h5>
                        <p class="text-muted mb-0">上次登录</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-shield-alt me-2"></i>账号安全</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    <a href="{% url 'password_reset' %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-key me-2"></i> 修改密码
                        </div>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    <a href="{% url 'logout' %}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-sign-out-alt me-2"></i> 退出登录
                        </div>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-edit me-2"></i>编辑个人资料</h5>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="mb-3">基本信息</h5>
                            
                            <div class="mb-3">
                                <label for="{{ u_form.username.id_for_label }}" class="form-label">用户名</label>
                                {{ u_form.username }}
                                {% if u_form.username.errors %}
                                <div class="text-danger">
                                    {% for error in u_form.username.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                <label for="{{ u_form.email.id_for_label }}" class="form-label">电子邮件</label>
                                {{ u_form.email }}
                                {% if u_form.email.errors %}
                                <div class="text-danger">
                                    {% for error in u_form.email.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <h5 class="mb-3">联系方式和头像</h5>
                            
                            <div class="mb-3">
                                <label for="{{ p_form.phone.id_for_label }}" class="form-label">电话号码</label>
                                {{ p_form.phone }}
                                {% if p_form.phone.errors %}
                                <div class="text-danger">
                                    {% for error in p_form.phone.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                <label for="{{ p_form.avatar.id_for_label }}" class="form-label">头像</label>
                                {{ p_form.avatar }}
                                {% if p_form.avatar.errors %}
                                <div class="text-danger">
                                    {% for error in p_form.avatar.errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                                {% endif %}
                                <div class="form-text">建议上传正方形图片，最大文件大小为2MB</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 mt-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i> 保存修改
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %} 